<template>
	<view class="">
		<view class="margin-top-sm padding-lr-xs" v-for="item in articles" >
			<view class="bg-white light radius-lg shadow-blur">
				<view class="flex padding-tb-sm padding-lr-sm justify-between">
					<view class="padding-xs" style="width: 85%;" @click="articlexq(item.id)">
						<view class="text-xl text-black"
							style="margin-bottom: 10rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 50rpx;">
							{{item.title}}
						</view>
						<view class="cu-card article" :class="isCard?'no-card':''">
							<view class="cu-item shadow">
								<view class="content" style="padding-left: 0; padding-right: 0; height: 175rpx;">
									<image :src="item.articlePhoto"
										mode="aspectFit" v-if="item.articlePhoto"
										style="width: 40%; height: auto; object-fit: contain;">
									</image>
									<!-- <view 
									style="display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; 
									overflow: hidden; text-overflow: ellipsis; font-size: 33rpx;"> -->
									<view style="width: 60% ; display: -webkit-box; text-overflow: ellipsis;" v-html="item.content">
										
									</view>
								</view>
							</view>
						</view>
						<view style="display: flex; justify-content: space-between; align-items: center;">
							<text class=""
								style="font-weight: 300; font-size: 90%; text-align: right;">{{item.createTime}}</text>
							<text class="cuIcon-attention"
								style="font-weight: 300; font-size: 90%; text-align: left;">{{item.count}}</text>
						</view>
					</view>
					<view class="">
						<!-- <view class="margin-top-xs cuIcon-edit" style="font-size: 80%;">编辑</view> -->
						<view class="margin-top-xs text-red cuIcon-delete" style="font-size: 80%;" @click="deletArticle(item.id)">删除</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="cu-card article" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				<view class="title"><view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view></view>
				<view class="content">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
					 mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
						<view>
							<view class="cu-tag bg-red light sm round">正义天使</view>
							<view class="cu-tag bg-green light sm round">史诗</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
</template>

<script setup>
	
	import {
		getMyArticles,
		doDeleteArticle
	} from '/pages/mine/api/article.js';
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const userDataString = localStorage.getItem("UserId");
	const userId = ref();
	const articles = ref([{
		id: '1',
		title: "文章标题",
		content: "文章内容",
		createTime: "创建时间",
		count: '浏览量',
		articlePhoto: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png'
	}])

	const loadArticles = async () => {
		const res = await getMyArticles(userId.value);
		console.log(res.data);
		articles.value = res.data;
		console.log(articles.value.articlePhoto);
	}
	
	const deletArticle = async (articleId) => {
		await doDeleteArticle(articleId);
		loadArticles();
		uni.showToast({
			title:"删除成功",
			duration:1000
		})
	}

	onShow(() => {
		const userData = JSON.parse(userDataString);
		userId.value = userData.data;
		loadArticles();
	});

	const articlexq = (id) => {
		// 跳转文章详情
		console.log('跳转文章详情:', id);
		window.location.href = "/#/pages/article/detail/detail?id=" + id; //文章详情跳转参数为id
	};
</script>

<style>
</style>